
<!--
 * @Author: your name
 * @Date: 2020-09-15 19:24:00
 * @LastEditTime: 2020-12-15 10:32:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \inventory-apie:\hjimi\人脸\html\face-recognition\src\views\Layout\components\Headnav.vue
-->
<style lang="less" scoped>
.witness_than {
  background: #f4f9ff;
  text-align: center;
  height: 100vh;
  p {
    color: #409eff;
    font-weight: bold;
  }
  .xsd {
    font-size: 30px;
    padding-top:30px;
    span {
      font-size: 35px;
      position: relative;
      top:2px;
    }
  }
  .xsd + p {
    font-size: 20px;
    padding-top: 15px;
    span {
      font-size: 25px;
    }
  }
}
.witness_box {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  & > div {
    width: 400px;
    border: 1px #409eff dashed;
    height: 500px;
    background: #fafafa;
    margin-left: 20px;
    margin-right: 20px;
  }
  .photo {
    width: 400px;
    height: 400px;
    overflow: hidden;
    // background: url("../../assets/img/21.jpeg") top center no-repeat;
    background-size: contain;
    position: relative;
  }
  .sc {
    margin-top: 31px;
    button {
      width: 200px;
      font-size: 16px;
    }
  }
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.el-icon-plus {
position: absolute;
    top: 50%;
    font-size: 60px;
    margin-left: -25px;
    color: #d7dae2;
}
.compare-scan {
   position: absolute;
    z-index: 7;
    top: 0;
    left: 0;
    width: 400px;
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="transparent",endColorStr="#3e88f1",gradientType="0");
    border-bottom: 3px solid #3e88f1;
    -webkit-animation: scan 1.5s infinite;
    -moz-animation: scan 1.5s infinite;
    animation: scan 1.5s infinite;
    background: -webkit-gradient(linear,left top,left bottom,from(transparent),to(#3e88f1));
    background: -webkit-linear-gradient(top,transparent,#3e88f1);
    background: -moz-linear-gradient(top,transparent,#3e88f1);
    background: linear-gradient(180deg,transparent,#3e88f1);
}
.img {position: absolute;left:0;top:0;}
.tip {
  padding-top: 20px;
 p{
    color: #999;
 }
}
/deep/.el-loading-spinner i {
    font-size: 22px;
}
.vs {
  position: relative;
  .el-switch1 {
  position: absolute;
    left: 32px;
    bottom: -110px;
    span{
      color: #999;
    }
}
}
.witness_than /deep/.el-icon-info {
  font-size: 14px;
  vertical-align: middle;
  display: inline-block;
  margin-left: 4px;
  color: #999;
  cursor: pointer;
}
</style>
<template>
  <div class="witness_than">
    <div class="witness_status" v-if="witness.witnessNum !== null && witness.witnessNum !== undefined ? true : false">
      <p class="xsd">相似度为: <span>{{ witness.witnessNum }}</span><el-popover
             placement="top-start"
             title="相似度说明："
             width="20"
             trigger="hover"
             :content='scoreTip'>
             <i slot="reference" class="el-icon-info"></i>
             </el-popover></p>
      <p>
        <em v-if="tShow">同一个人的可能性</em> <span :style="{color: witness.witnessNum <= 0 ? 'red' : ''}">{{ witness.witness_jibie }}</span>
      </p>
    </div>
    <div class="witness_box">
      <div v-loading="duibiLoading1" element-loading-text="正在传输检测中..." element-loading-spinner="el-icon-loading">
       <div @click="q1_handle">
             <!-- apis/face/verification -->
          <el-upload
          class="avatar-uploader"
          :action="q1"
          :data="witness.imgParams1"
          :on-error="imgError"
          :show-file-list="false"
          :on-success="handleAvatarSuccess1"
          :before-upload="beforeAvatarUpload"
        >  
       <div @click="uploadMark = 0">
          <div class="photo">
          <div class="compare-scan" v-if="db_animate0"></div>
           <i class="el-icon-plus"></i>
          <img class="img" v-if="imageUrl1" :src="imageUrl1" width="100%">
          </div>
          <div class="sc">
              <el-button type="primary">本地上传<i class="el-icon-upload el-icon--right"></i></el-button>
          </div>
       </div>
        </el-upload>
       </div>
      </div>
     <p class="vs">
        <svg
        t="1603249651698"
        class="icon"
        viewBox="0 0 1024 1024"
        p-id="8864"
        width="200"
        height="200"
       >
        <path
          d="M327.516312 634.92445c-6.596893 21.342888-10.547973 42.650498-11.85324 61.453405h-1.305267c-1.305268-18.802908-5.256348-38.875805-10.547973-60.218693l-115.957143-428.974403H63.993385l184.466049 605.855789h129.115651L563.381679 207.184759h-119.908223L327.516312 634.92445z m602.18693-91.580391c-19.7554-28.856995-56.655665-56.444-109.360251-81.526303-46.107693-22.5776-73.800531-40.145795-85.653771-53.939298-11.85324-12.55879-17.109588-27.587005-17.109587-42.650498 0-20.072898 7.90216-35.13639 25.047025-46.42519s39.546078-17.568195 67.203638-17.568195c48.753505 0 90.910118 13.793503 126.469838 41.415785V220.978262c-35.55972-15.063493-79.056878-22.5776-131.761463-22.577601-63.252558 0-113.311331 15.063493-151.516864 46.425191-38.205533 31.361698-56.655665 75.246908-56.655665 131.690908 0 76.516898 42.156613 135.465601 125.164571 175.611397 52.704585 25.082303 85.653771 45.1552 98.812278 58.948702 13.193785 13.793503 18.450133 30.091708 18.450133 46.425191 0 18.802908-7.90216 35.101113-23.706481 46.42519-15.80432 12.55879-39.5108 18.802908-69.84945 18.802908-55.350398 0-104.103903-20.072898-147.565784-60.218693v129.186206c39.546078 22.5776 89.604851 33.8664 151.516864 33.8664 67.203638 0 118.602956-15.063493 155.503221-46.42519 36.900265-30.091708 55.350398-75.246908 55.350398-132.960899-0.035278-40.110518-10.58325-75.211631-30.33865-102.833913z m0 0"
          fill="#409eff"
          p-id="8865"
        ></path>
      </svg>
      <span class="el-switch1">
              <el-switch
            v-model="needQualityDetection"
            active-text="图片质量评估"
            @change="zhiliang"
            ></el-switch><el-popover
             placement="top-start"
             title="图片质量评估项："
             width="20"
             trigger="hover"
             :content='qualityTip'>
             <i slot="reference" class="el-icon-info"></i>
             </el-popover>
      </span>
     </p>
      <div v-loading="duibiLoading2" element-loading-text="正在传输检测中..." element-loading-spinner="el-icon-loading">
       <div @click="q2_handle">
         <!-- apis/face/verification -->
          <el-upload
          class="avatar-uploader"
          :action="q2"
          :data="witness.imgParams2"
          :on-error="imgError"
          :show-file-list="false"
          :on-success="handleAvatarSuccess2"
          :before-upload="beforeAvatarUpload"
         >
         <div @click="uploadMark = 1">
            <div class="photo">
           <div class="compare-scan" v-if="db_animate1"></div>
            <i class="el-icon-plus"></i>
           <img class="img" v-if="imageUrl2" :src="imageUrl2" width="100%">
           </div>
          <div class="sc">
            <el-button type="primary">本地上传<i class="el-icon-upload el-icon--right"></i></el-button>
          </div>
         </div>
        </el-upload>
       </div>
      </div>
    </div>
   <div class="tip"><p>图片文件支持PNG、JPG、JPEG、BMP，图片大小不超过3M，人脸对比只可对比图片中主体部分。</p></div>
 
  </div>
</template>
<script>
import { verification } from "@/api/witnessThan"
import Mock from '../../mock'
import { removeToken } from '@/utils/auth'
import { qualityTip, scoreTip } from '@/utils/textTip'
export default {
  name: "witnessThan",
  data() {
    return {
      qualityTip: qualityTip() + '比对',
      scoreTip: scoreTip(),
      xsdShow: false,
      // tShow: true,
      duibiLoading1: false,
      duibiLoading2: false,
// 2个上传路劲默认为任意正常的api
      q1: '',
      q2: '',
      q_r: 'http://www.zg.com',
      q: 'apis/api/algo/face/verification', //实际上传地址
      witness: {
        witnessNum: null,
        witness_jibie: '',
        //  图片比对参数
       imgParams1: {
        //  sourceFile: '',
        //  destFile: '',
        //  'destination.format': '',
       },
        imgParams2: {
        // sourceFile: '',
        // destFile: '',
        // 'destination.format': '',
       },
      },
      needQualityDetection: true,
      imageUrl1: '',
      imageUrl2: '',
      db_animate0: false,
      db_animate1: false,
      uploadMark: null,
      errorMark: true, //上传失败标识
      img1_mark: '',
      imgg2_mark: ''
    };
  },
  computed: {
      tShow() {
        return this.witness.witnessNum <= 0 || this.witness.witnessNum >= 1 ? false : true
      }
  },
  methods: {
    zhiliang() {
      this.$message.success(this.needQualityDetection ? '已开启图片质量评估，请上传图片比对！' : '已关闭图片质量评估，请上传图片比对！')
    },
    
  // 设置上传路径
    q1_handle() {
          if(this.imageUrl2 == '') {
            this.q1 = this.q_r
          } else {
            this.q1 = this.q
          }
      },
    q2_handle() {
          if(this.imageUrl1 == '') {
            this.q2 = this.q_r
          } else {
            this.q2 = this.q
          }
      },
    fileUrl (res, fileRaw, animate0, animate1, imageUrl, imageUrlNull) {
      let _this = this
      //  this.witness[x].background = 'url(' + URL.createObjectURL(y['raw']) + ') center center / contain no-repeat'
       this[imageUrl] = URL.createObjectURL(fileRaw);
       this[animate0] = this[animate1] =  this[imageUrlNull] ? true : false
       res.code === 0
       ? showScore(res.data.score)
        : new function () {
          if(res.code === 10109) {
            removeToken()
             _this.$router.go(0)
           _this.$message.warning(res.msg, 5000)
          }else {
             _this.$message.warning(res.msg + '！请另选重试', 5000)
                setTimeout(() => {
                _this.$router.go(0)
            }, 4000);
          }
          //  if (res.code === 10102) {
          //    _this.$message.error(res.msg + '，比对失败！', 5000)
          //   setTimeout(() => {
          //       _this.$router.go(0)
          //        _this[animate0] = _this[animate1] = false
          //       _this.imageUrl1 = _this.imageUrl2 = ''
          //       _this.xsdShow = false
          //   }, 4000);
          //  } else if(res.code !== 0){
          //   //  _this.$message.error(res.msg, 5000)
          //   //     setTimeout(() => {
          //   //     _this.$router.go(0)
          //   // }, 4000);
          //  }
        }
       function showScore (score) {
           _this.duibiLoading1 = _this.duibiLoading2 = false
         let _v = _this.witness,
             scoreSection = [
              {
                score: 0.6,
                tip:'较低'
              },
              {
                score: 0.8,
                tip:'高'
              },
              {
                score: 0.9,
                tip:'极高'
              },
              {
                score: 1,
                tip:'是同一人'
              },
              {
                score: 0,
                tip:'不是同一人！'
              }
              ]
                if(score >= _s(3, true)) { //>=1是同一个人
                 _v.witness_jibie = _s(3, false)

                } else if(score >= _s(1, true) && score < 1) {  //极高
                   _v.witness_jibie = _s(2, false)
                   
                } else if(score <= _s(1, true) && score > 0.6) { //高
                   _v.witness_jibie = _s(1, false)
                   
                } else if(score < _s(0, true) && score > 0) { //较低
                   _v.witness_jibie = _s(0, false)
                   
                } else if(score <= _s(4, true)) { //<=0不是同一人
                   _v.witness_jibie = _s(4, false)
                }  
                
              setTimeout(() => {
                 animateHide(false)
                 _v['witnessNum'] = score
              },1000) 
              function _s (i, isTrue) { return isTrue ? scoreSection[i].score : ( _v['witness_jibie'] = scoreSection[i].tip ) }
              function animateHide(x) {  _this.db_animate0 = _this.db_animate1 = x; }
          }
    },
    handleAvatarSuccess1(res, file) {
    this.fileUrl(res, file.raw,'db_animate0', 'db_animate1','imageUrl1', 'imageUrl2')
    },
    handleAvatarSuccess2(res, file) {
    this.fileUrl(res, file.raw,'db_animate0', 'db_animate1','imageUrl2', 'imageUrl1')
    },
    
// 上传校验
    imgRule (fileType, fileSize, fileRaw) {
     function imageType () { return fileType === 'image/jpeg' || fileType === 'image/jpg' || fileType === 'image/png' || fileType === 'image/bmp'  }
     const isLt1M = fileSize / 1024 / 1024 < 3;
        if (!imageType()) { 
          this.$message.error('上传人脸图片只能是四种格式（jpg/jpeg/png/bmp）!')
          this.txtTip()
          } else if (imageType() && !isLt1M) {
             this.$message.error('上传人脸图片大小不能超过3MB!')
             this.txtTip()
          } else if (!imageType() && !isLt1M) {
             this.$message.error('上传人脸图片大小不能超过3MB,只能是四种格式（jpg/jpeg/png/bmp）!')
             this.txtTip()
          } else {
               let format = fileType.substr(fileType.indexOf('/') + 1).toUpperCase()
               if(format === 'JPEG') {
                   format = 'JPG'
               }
            let imgParams1 = this.witness.imgParams1, 
                imgParams2 = this.witness.imgParams2
            if(this.uploadMark == 0) { //上传左边图 
             this.duibiLoading1 = true
                 imgParams1['sourceFile'] = fileRaw
                 imgParams2['destFile'] = fileRaw 
                 imgParams1['source.format'] = format
                 imgParams2['destination.format'] = format
                 imgParams1['needQualityDetection'] = this.needQualityDetection
            } else {
               this.duibiLoading2 = true
                  imgParams2['sourceFile'] = fileRaw
                  imgParams1['destFile'] = fileRaw
                  imgParams1['destination.format'] = format
                  imgParams2['source.format'] = format
                  imgParams2['needQualityDetection'] = this.needQualityDetection
            }
          }
        return imageType() && isLt1M;  
    },
    txtTip () {
      let _this = this
       _this.errorMark = false
    },
    beforeAvatarUpload(file) {
      this.imgRule(file.type, file.size, file)
    },
// 上传失败
    imgError(err, file, fileList) {
    let _this = this
     this.errorMark ? errTip() : String
     function errTip () {
        _this.$message({
               message: err.type == 'error' ? file.name + ' 上传失败，请重试' : '上传失败，请重试',
                type: "error"
           })
     }
},
  }

}
</script>
